WIP: Update tailwind to version 4.0.0 #5990
Conversation
|
@Flo0807 mentioned in the related issue that the plugin works if it is directly exported as function: phoenixframework/tailwind#107 (comment) I verified that it works, but I'm hesitant to rely on this. v4 doesn't really document how plugins should look like so that could change. I think if we wait for tailwindlabs/tailwindcss#15934, we should be good! |
leifmetcalf
force-pushed
the
tailwind-v4
branch
2 times, most recently
from
51b9450 to
59e1743
Compare
leifmetcalf
force-pushed
the
tailwind-v4
branch
from
59e1743 to
9255040
Compare
| @variant phx-click-loading ([".phx-click-loading&", ".phx-click-loading &"]); | ||
| @variant phx-submit-loading ([".phx-submit-loading&", ".phx-submit-loading &"]); | ||
| @variant phx-change-loading ([".phx-change-loading&", ".phx-change-loading &"]); |
There was a problem hiding this comment.
Tried the variants this way and it was not working, it should be:
| @variant phx-click-loading ([".phx-click-loading&", ".phx-click-loading &"]); | |
| @variant phx-submit-loading ([".phx-submit-loading&", ".phx-submit-loading &"]); | |
| @variant phx-change-loading ([".phx-change-loading&", ".phx-change-loading &"]); | |
| @custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &); | |
| @custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &); | |
| @custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &); |
There was a problem hiding this comment.
Thank you for fixing this! Looking at the updated tailwind docs, we might also want to use @custom-variant instead of @variant? https://tailwindcss.com/docs/functions-and-directives#variant-directive
There was a problem hiding this comment.
I think so. Here's are more details about it:
https://tailwindcss.com/docs/hover-focus-and-other-states#registering-a-custom-variant
This is waiting on the elixir library being updated to support tailwind v4 in phoenixframework/tailwind#103.
Things I'm not sure about:
assets/css/tailwind_heroicons.js, but I'm not sure about the name and I don't think it belongs inassets/css. Also, for now, the tailwind standalone cli doesn't bundle the javascript library, so the heroicons plugin fails to load without runningnpm install tailwindcssor similar. See [v4] Standalone cli doesn't bundle tailwindcss js library tailwindlabs/tailwindcss#15235.